<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 30px;
        text-align: center;
        background: rgba(0, 0,  0, .5);
    }
    .br *{
        margin: 0;
        padding: 0;
    }
    .br{
        line-height:normal;
        font-size: 12px;
        color: #fff;
        width: 800px;
        text-align: left;

    }
    .br dt,.br dd{
        display: inline;
    }
    .br dd+dt:before{
        content:"\A";
        white-space: pre;
    }
    .br dd+dd:before{
        content:",";
    }
    li.a ~ li {
        color: red;
    }
    .clip{
        background:yellowgreen url(image/1.jpg) no-repeat;
        border: 5px dashed #000;
        padding: 40px;
        text-align: left;
        background-origin:content-box;
        background-clip:content-box;
    }
    li{
        list-style:none;
    }
    .zebra{
        background:
        linear-gradient(rgba(0,0,0,.2) 50%,transparent 0),yellowgreen;
        padding-top:4px;
        background-size:auto 30px;
        border: 5px solid #000;
        background-origin:content-box;
        /*background-image: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);*/
    }
    .zebra ul li{
        line-height:15px;

    }
    .textMiaobian{
        background: red;
        font-size: 26px;
        color: #fff;
        text-shadow:1px 1px 0px black,
                    -1px -1px 0px black,
                    -1px 1px 0px black,
                    1px -1px 0px black;
    }
    .light{
        text-shadow:0 0 5px white,0 0 8px white;
        color: #fff;
    }
</style>
<body>
<div class="br">
    <dl>
        <dt>名字：</dt>
        <dd>Moqin</dd>
        <dt>邮箱：</dt>
        <dd>360353164@qq.com</dd>
        <dd>624529151@qq.com</dd>
        <dd>624529151@qq.com</dd>
        <dt>手机：</dt>
        <dd>18718341222</dd>
    </dl>
    <ul>
        <li class="a">One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>
<div class="clip">
sdsd
</div>
<div class="zebra">
    <ul>
        <li>这个</li>
        <li>这个</li>
        <li>这个</li>
        <li>这个</li>
    </ul>
</div>
<div class="textMiaobian">
    CSS
</div>
<div class="light">
    发光
</div>
</body>
</html>